<template>
	<div class="edu-header-search-wrapper" :class="{small:small,'width_border':border}" :style="[eduSearchStyle]">
		<div class="search-inner">
			<input @input="onInput($event)" :value="keyword" placeholder-class="is-placeholder" class="search-input"
				:placeholder="text" @confirm="confirmHandle()" />
			<div class="clear-icon" @click="resetHandle" v-if="haveSearch">
				<u-icon name="close-circle-fill" size="34rpx" color="#B3B9C0" />
			</div>
			<u-icon v-else :size="iconSize" color="#B3B9C0" name="search" @click="confirmHandle()"></u-icon>
		</div>
		<div class="filter-btn-wrap" v-if="filter" @click="openFilter">
			<image src="/static/common/ico_select.png" mode="aspectFill" class="filter-icon" />
		</div>
	</div>
</template>

<script>
	import { rpx2Px } from "@/utils/tool";

	export default {
		props: {
			small: {
				type: Boolean,
				default: () => true,
			},
			pt: {
				type: String,
				default: () => "24rpx",
			},
			pb: {
				type: String,
				default: () => "24rpx",
			},
			pl: {
				type: String,
				default: () => "32rpx",
			},
			pr: {
				type: String,
				default: () => "32rpx",
			},
			keyword: {
				type: String,
				required: true,
			},
			filter: {
				type: Boolean,
				default: () => true
			},
			text: {
				type: String,
				default: () => "请输入",
			},
			radius: {
				type: String,
				default: () => ""
			},
			border: {
				type: Boolean,
				default: () => false
			}
		},
		emits: ['search', 'update:keyword', 'reset', 'filter'],
		methods: {
			reset() {
				this.$emit('update:keyword', '')
				this.haveSearch = false
			},
			openFilter() {
				this.$emit('filter')
			},
			resetHandle() {
				this.haveSearch = false
				this.$emit('update:keyword', '')
				this.$emit('reset')
				this.$emit("search", "")
			},
			onInput(ev) {
				const { value } = ev.detail
				if (value === '') this.$emit('reset')
				this.$emit('update:keyword', value)
				console.log(value, 'value');
			},
			confirmHandle() {
				this.$emit('search', this.keyword)
				this.haveSearch = true
			},
		},
		computed: {
			iconSize() {
				return '22px'
			},
			eduSearchStyle() {
				const { radius } = this
				const result = {
					'--edu-search-p-t': rpx2Px(this.pt),
					'--edu-search-p-b': rpx2Px(this.pb),
					'--edu-search-p-l': rpx2Px(this.pl),
					'--edu-search-p-r': rpx2Px(this.pr),
				}
				if (radius) result.borderRadius = rpx2Px(radius)
				return result
			},
		},
		data() {
			return {
				haveSearch: false,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edu-header-search-wrapper {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		padding: var(--edu-search-p-t) var(--edu-search-p-r) var(--edu-search-p-b) var(--edu-search-p-l);

		//&.small {
		//  padding: 14rpx 24rpx;
		//
		//  .search-inner {
		//    padding: 8rpx 20rpx;
		//  }
		//}
		&.width_border {
			border-bottom: 2rpx solid #F5F5F6;
		}

		.filter-btn-wrap {
			display: flex;
			margin-left: 24rpx;
			align-items: center;

			.filter-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.filter-btn {
				height: 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.6);
				line-height: 40rpx;
				margin-left: 4rpx;
			}
		}

		.search-inner {
			flex: 1;
			padding: 0 24rpx;
			height: 72rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			// background: #F7F8FA;
			background: #fff;
			border-radius: 16rpx;


			.search-input {
				margin-left: 16rpx;
				flex: 1;
				height: 44rpx;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 44rpx;
				color: #313848;
				text-align: left;

				&.is-placeholder {
					color: #B3B9C0;
				}
			}

			.search-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>